<template>
  <div class="dynamic-input-wrapper">
    <el-select
      v-model="selectedType"
      placeholder="选择输入类型"
      style="width: 120px; margin-right: 8px"
      size="default"
      @change="handleTypeChange"
    >
      <el-option
        v-for="item in typeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <!-- 输入组件区域 -->
    <div style="flex: 1; margin-right: 8px">
      <!-- 这里会根据 selectedType 显示对应的输入组件 -->
      <!-- 实际渲染逻辑在父组件中处理 -->
    </div>

    <!-- 参数设置按钮（仅需要参数的类型显示） -->
    <el-button
      v-if="needParamTypes.includes(selectedType)"
      type="primary"
      size="default"
      @click="showOptionsDialog = true"
    >
      设置参数
    </el-button>

    <!-- 参数设置对话框 -->
    <el-dialog
      v-model="showOptionsDialog"
      title="设置参数"
      width="400px"
    >
      <div>
        <div class="text-sm text-gray-600 mb-2">
          参数格式：每行一个配置，格式为 key=>value
        </div>
        <el-input
          v-model="optionsText"
          type="textarea"
          :rows="10"
          placeholder="例如：
small=>小
medium=>中
large=>大"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showOptionsDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmOptions">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

interface Props {
  modelValue: string // 类型值
  options?: Array<{ label: string; value: any }> // 参数选项
}

const props = withDefaults(defineProps<Props>(), {
  options: () => []
})

const emit = defineEmits<{
  'update:modelValue': [value: any]
  'update:options': [options: Array<{ label: string; value: any }>]
  change: [value: any]
  blur: [event: FocusEvent]
  focus: [event: FocusEvent]
}>()

const typeOptions = [
  { label: '文本', value: 'text' },
  { label: '数字', value: 'number' },
  { label: '布尔', value: 'boolean' },
  { label: '选择', value: 'select' },
  { label: '多选', value: 'checkbox' },
  { label: '单选', value: 'radio' },
  { label: '日期', value: 'date' },
  { label: '文本域', value: 'textarea' },
  { label: '滑块', value: 'slider' }
]

// 需要参数设置的类型
const needParamTypes = ['select', 'checkbox', 'radio']

const selectedType = ref(props.modelValue || 'text')
const showOptionsDialog = ref(false)
const optionsText = ref('')

// 监听options变化，更新文本显示
watch(() => props.options, (newOptions) => {
  if (newOptions && newOptions.length > 0) {
    optionsText.value = newOptions.map(opt => `${opt.value}=>${opt.label}`).join('\n')
  } else {
    optionsText.value = ''
  }
}, { immediate: true })

const internalValue = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
    emit('change', val)
  }
})

// 监听类型变化，同步更新modelValue
watch(selectedType, (newType) => {
  emit('update:modelValue', newType)
})

// 处理类型变化
const handleTypeChange = (newType: string) => {
  // 如果切换到非参数类型，清空选项
  if (!needParamTypes.includes(newType)) {
    emit('update:options', [])
  }
}

// 确认选项设置
const confirmOptions = () => {
  try {
    const options: Array<{ label: string; value: any }> = []
    const errors: string[] = []

    // 验证输入不能为空
    if (!optionsText.value.trim()) {
      ElMessage.error('参数配置不能为空')
      return
    }

    // 解析key=>value格式，使用换行符作为分隔符
    const pairs = optionsText.value.split('\n').filter(p => p.trim())

    if (pairs.length === 0) {
      ElMessage.error('请输入有效的参数配置')
      return
    }

    pairs.forEach((pair, index) => {
      const parts = pair.split('=>')
      if (parts.length !== 2) {
        errors.push(`第${index + 1}项格式错误：缺少=>分隔符`)
        return
      }

      const [value, label] = parts
      if (!value?.trim()) {
        errors.push(`第${index + 1}项缺少value值`)
        return
      }
      if (!label?.trim()) {
        errors.push(`第${index + 1}项缺少label值`)
        return
      }

      options.push({
        label: label.trim(),
        value: value.trim()
      })
    })

    // 如果有错误，显示错误提示
    if (errors.length > 0) {
      ElMessage.error(errors.join('\n'))
      return
    }

    // 验证是否有重复值
    const values = options.map(opt => opt.value)
    const uniqueValues = new Set(values)
    if (values.length !== uniqueValues.size) {
      ElMessage.error('存在重复的value值，请检查！')
      return
    }

    // 更新选项
    emit('update:options', options)
    showOptionsDialog.value = false

    // 成功提示
    ElMessage.success('参数配置设置成功！')

  } catch (error) {
    console.error('解析选项格式错误:', error)
    ElMessage.error('参数格式解析失败，请检查输入格式')
  }
}

</script>

<style scoped>
.dynamic-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}
</style>
